<html>
  <head>
    <meta charSet="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1,
      user-scalable=no" />
    <title>player</title>
    <style type="text/css">
      body,
      html {
        width: 100%;
        height: 100%;
        background: #000;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
        overflow-y: hidden
      }

      * {
        margin: 0;
        border: 0;
        padding: 0;
        text-decoration: none
      }
    </style>
  </head>
  <body>
    <div id="playerCnt" className="prism-player"></div>
    <div id="dplayer"></div>
    <script src="./lib/js/hls.js"></script>
    <script src="./lib/js/DPlayer.js"></script>
    <script>
      function getPar(par, local_url = document.location.href) {
        //get url
        try {
          let uriSearch = new URL(local_url);

          let searchParams = new URLSearchParams(uriSearch.search)
          if (searchParams.has(par))
            return searchParams.get(par);

        } catch {
          console.error('get par error' + local_url);
        }

        return "";
      }

      document.addEventListener("DOMContentLoaded", () => {
        console.log("init dplayer");
        let url = getPar('url');
        if (url == "") {
          alert('未设置播放链接')
          return;
        }
        url = url.split("?")[0]
        let pic = getPar('pic')
        console.log(url)
        const dp = new DPlayer({
          container: document.getElementById('dplayer'),
          screenshot: true,
          video: {
            url: url,
            pic: pic,
            thumbnails: pic,
          },
          preload: 'auto',
          mutex: true,
          autoplay: true
        });
        dp.on('error', function(err) {
          console.log('player err');
          console.log(err)
        });
      });
    </script>

  </body>
</html>